---
title: Vertical Resource View
layout: demo-v4
plugins: [ interaction, daygrid, timegrid, resource-common, resource-daygrid, resource-timegrid ]
---
<script>

  document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
      plugins: [ 'interaction', 'resourceDayGrid', 'resourceTimeGrid' ],
      timeZone: 'UTC',
      defaultView: 'resourceTimeGridDay',
      editable: true,
      selectable: true,
      eventLimit: true, // allow "more" link when too many events
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'resourceTimeGridDay,resourceTimeGridTwoDay,timeGridWeek,dayGridMonth'
      },
      views: {
        resourceTimeGridTwoDay: {
          type: 'resourceTimeGrid',
          duration: { days: 2 },
          buttonText: '2 days',
        }
      },
      resources: [
        { id: 'a', title: 'Room A' },
        { id: 'b', title: 'Room B', eventColor: 'green' },
        { id: 'c', title: 'Room C', eventColor: 'orange' },
        { id: 'd', title: 'Room D', eventColor: 'red' }
      ],
      events: '{{ site.data.demo_feed_baseurl }}/demo-events.json?with-resources=4&single-day'
    });

    calendar.render();
  });

</script>
<style>

  .fc-today {
    background: transparent !important; /* hack. because demo will always start out on current day */
  }

</style>
